<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ page isELIgnored ="false" %> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c" %>
<%
    response.setHeader("Cache-Control", "no-store"); //HTTP 1.1    
    response.setHeader("Pragma", "no-cache"); //HTTP 1.0    
    response.setDateHeader("Expires", 0); //prevents caching at the proxy server    
%>
<!DOCTYPE html>
<html>
    <head>
        <title>HTML5 and jQuery Mobile</title>
        <link rel="stylesheet" href="${applicationScope.webApp.root}/css/jquery.mobile.min.css" />
        <script src="${applicationScope.webApp.root}/js/json2.js"></script>
        <script src="${applicationScope.webApp.root}/js/jquery.min.js"></script>
        <script src="${applicationScope.webApp.root}/js/jquery.mobile.min.js"></script> 
    </head>
    <body id="body"> 
        <div data-role="page" id="page1"> 
            <div data-role="header">
                <a id='titleLeft' href="${applicationScope.webApp.root}/store?command=storeInfo" data-role="button" data-theme="a" data-icon="arrow-l">返回</a>
                <h1 id="title">菜单列表</h1>
                <a id='titleRight' href="${applicationScope.webApp.root}/menu?command=menuInfo" data-role="button" data-theme="a" data-icon="plus">新增菜单</a>
            </div>
            <div data-role="content"> 
                <div class="content-primary">	
                    <ul data-role="listview" data-inset="true">
                        <c:forEach items="${requestScope.menuList}" var="menu">
                            <li style="height: 100px">
                                <div>
                                    <a href="${applicationScope.webApp.root}/image?command=form&menuId=${menu.id}&type=cover&mode=portrait">
                                        <img style="position:absolute; top: 7px; left: 5px;" src="${applicationScope.webApp.root}/images/${menu.id}/${menu.smallPortrait}" /> 
                                    </a>
                                    <h3 style="position:absolute; top: 17px; left: 100px; font-size: 30px">${menu.title} - ${menu.name}</h3>
                                </div>
                                <div style="position:absolute; top: 2px; right: 10px; top: 15px;">
                                    <div data-role="controlgroup">
                                        <a href="${applicationScope.webApp.root}/course?command=courseList&menuId=${menu.id}" data-role="button">菜品列表</a>
                                        <a href="${applicationScope.webApp.root}/menu?command=menuInfo&menuId=${menu.id}" data-role="button">菜单信息</a>
                                    </div>
                                </div>
                            </li>
                        </c:forEach>
                    </ul> 
                </div><!--/content-primary --> 
            </div><!-- /content --> 
        </div>
    </body>
</html>
